<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="UploadFileLabel">上传文件</h4>
</div>
<div class="modal-body">
    <form class="form-inline" action="/files/upload_file" enctype="multipart/form-data" method="post">
        {% csrf_token %}
        <div class="row">
            <div class="col-md-10 form-group">
                <label for="up_file">选择文件</label>
                <input id="up_file" class="form-control" type="file" name="up_file" placeholder="浏览...">
                <p id="up_file_info"></p>

            </div>
        </div>
        <br>
        <button type="reset" class="btn btn-primary">清空选择</button>
        <button id="upload_button" type="submit" class="btn btn-primary">上传</button>
        <span><strong> 注意：</strong> 同名文件将被覆盖。</span>
        <div id="uploading_flag" hidden="hidden">
            <hr>
            <img id="uploading_icon" src="/static/img/uploading.gif" hidden="hidden"><span><strong>  正在上传...</strong></span>
        </div>
        <script>
            $(document).ready(function () {
                var
                    fileInput = document.getElementById("up_file"),
                    info = document.getElementById("up_file_info");

                fileInput.addEventListener('change', function () {
                    if (!fileInput.value) {
                        info.innerHTML = "没有选取文件";
                        return;
                    }

                var file = fileInput.files[0];
                var size = file.size / 1024 / 1024;
                size = size.toFixed(3);

                if (size > 20.0 ) {
                    info.innerHTML = '<br>' +
                        '<p><strong>文件名称: </strong>' + file.name + '</p>' +
                        '<p style="color: red"><strong>文件大小: </strong>' + size + 'MB' + '</p>' +
                        '<p><strong>修改日期: </strong>' + file.lastModifiedDate + '</p>' +
                        '<p style="color: red"><strong>注意: </strong>' + '单个附件文档大小不能大于20MB!</p>';

                    $('#up_file').val("");
                } else {
                    info.innerHTML = '<br>' +
                        '<p><strong>文件名称: </strong>' + file.name + '</p>' +
                        '<p><strong>文件大小: </strong>' + size + 'MB' + '</p>' +
                        '<p><strong>修改日期: </strong>' + file.lastModifiedDate + '</p>';
                }
                })
            })
        </script>

        <script>
            $(document).ready($("#upload_button").click(
                function () {
                    $("#uploading_flag,#uploading_icon").show();
                }
            ))
        </script>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><strong>关闭</strong></button>
</div>
